import React from 'react';
import { Breadcrumb } from 'antd';
import { Link } from 'react-router-dom';
import http from '../../http'
class Detail extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            detail: {},
            generalShow: true,
            firstGeneralName: [],
            secondGeneralName: []
        }
    }
    details() { //获取商品信息
        const id = this.props.match.params.id
        http.get('/api/manage/product/detail.do?productId='+id).then(res => {
            this.setState({
                detail: res.data
            })
        })
    }
    general = () => { //商品分类
        // 一级
        http.get('/api/manage/category/get_category.do?categoryId=0').then(res => {
            const arr = res.data.filter(item => {
                return item.id===this.state.detail.parentCategoryId
            })
            // 二级
            http.get('/api/manage/category/get_category.do?categoryId='+arr[0].id).then(res => {
                const arr1 = res.data.filter(it=>{
                    return it.id===this.state.detail.categoryId
                })
                this.setState({
                    firstGeneralName: arr[0].name,
                    secondGeneralName: arr1[0].name,
                    generalShow: false
                })
            })
        })
    }
    componentDidMount() {
        this.details()
        this.general()
    }
    render() { 
        const {detail,generalShow,firstGeneralName,secondGeneralName} = this.state
        return ( 
            <div className='detail'>
                <div className='breadcrumb-con'>
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to="/main/home">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>商品</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <Link to="/main/shop">商品列表</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>商品详情</Breadcrumb.Item>
                    </Breadcrumb>
                    <h2>商品详情</h2>
                </div>
                <div className='shop-con'>
                    <p className='detail-title'>商品基本信息</p>
                    <div className='detail-table detail-border'>
                        <div>
                            <span>名称 :</span>
                            <span>{detail.name}</span>
                        </div>
                        <div>
                            <span>标题 :</span>
                            <span>{detail.subtitle}</span>
                        </div>
                        <div>
                            <span>商品分类 :</span>
                            <span>{generalShow ? '无' : firstGeneralName+'-'+secondGeneralName}</span>
                        </div>
                        <div>
                            <span>价格 :</span>
                            <span>￥{detail.price}</span>
                        </div>
                        <div>
                            <span>上架状态 :</span>
                            <span>{detail.status === 1 ? '在售' : '下架'}</span>
                        </div>
                        <div>
                            <span>库存 :</span>
                            <span>{detail.stock}</span>
                        </div>
                    </div>
                    <div className='detail-wrap'>
                        <p className='detail-title'>商品基本信息</p>
                        <div className='detail-con' dangerouslySetInnerHTML={{ __html: detail.detail }}></div>
                    </div>
                </div>
            </div>
        );
    }
}
 
export default Detail;